<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="toggleCard">
			<view class="toggle">
				<u-tabs :list="togList" lineWidth="80" lineHeight="7" @click="changeTab" lineColor="#007A69"
					:activeStyle="{
				            color: '#1C1E41',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#333333',
				            transform: 'scale(1)'
				        }">
				</u-tabs>
			</view>
			<!-- 旅游攻略 -->
			<view class="card1" v-if="names == '旅游攻略'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'旅游攻略')">
				<view class="left">
					<image class="image" :src="item.picList[0]" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="one-titles">
						{{item.title}}
					</view>
					<view class="one-content">
						<view class="" style="display: flex;">
							<view class="image">
								<image :src="item.headUrl" mode=""></image>
							</view>
							<view class="text">
								<view class="name">
									{{item.realName}}
								</view>
								<view class="time">
									{{item.createDate}}
								</view>
							</view>
						</view>
						<view class="Thumbs">
							<!-- <u-icon name="thumb-up" size="50rpx" :cllor="likeShow !==true?'#1bd0f4 ':''"></u-icon> -->
							<u-icon name="thumb-up" v-if="likeType==0" size="50rpx" @click.stop="like(item)"></u-icon>
							<u-icon name="thumb-up-fill" color='#007A69' size="50rpx" v-else
								@click.stop="like(item)"></u-icon>
							<u-badge :type="type" max="99" :value="likenum"></u-badge>
						</view>
					</view>
				</view>
			</view>

			<!-- 社区互动 -->
			<view class="card" v-if="names == '社区互动'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'社区互动')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<view>
						<!-- {{item.key}} -->
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<!-- 	<view class="center-text">
						<view v-for="it,ind in substrings ">
							{{it |removeHtmlStyle}}
						</view>
					</view> -->
					<view class="center-text">
						{{item.content | removeHtmlStyle}}
					</view>

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 议事广场 -->
			<view class="card" v-if="names == '议事广场'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'议事广场')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<!-- 	<view class="top-time">
						{{item.key}}
					</view> -->
					<view>
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<view class="center-text">
						{{item.content | removeHtmlStyle}}
					</view>
					<!-- <view class="center-text">
						<view v-for="it,ind in substrings ">
							{{it |removeHtmlStyle}}
						</view>
					</view> -->

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 文化休闲 -->
			<view class="card" v-if="names == '文化休闲'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'文化休闲')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<!-- <view class="top-time">
						{{item.key}}
					</view> -->
					<view>
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<view class="center-text">
						{{item.content | removeHtmlStyle}}
					</view>
					<!-- <view class="center-text">
						<view v-for="it,ind in substrings ">
							{{it |removeHtmlStyle}}
						</view>
					</view> -->

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 兴趣课程 -->
			<view class="card1" v-if="names == '兴趣课程'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'兴趣课程')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<!-- <u-icon name="map"></u-icon> -->
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{item.address}}</view>
					</view>
					<view class="three-certificate">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/c81ba13778a54369b826427a53729e8e.png" mode="">
						</image>
					</view>
					<view class="four-key">
						<view class="key-key">
							<view class="key" v-for="(ite,inde) in item.listType" :key="index">
								{{ite}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 求职信息 -->
			<view class="card2" v-if="names == '求职信息'" v-for="item,index in userList" :key="index"
				@click.stop="navInformation(item,0)">
				<view class="one-title">
					<view class="left">
						{{item.positionName}}
					</view>
					<view class="right">
						{{item.money}}元
					</view>
				</view>
				<view class="two-address">
					<image class="image" src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png"
						mode="">
					</image>
					<view>{{item.address}}</view>
				</view>
				<view class="four-key">
					<view class="key" v-for="(ite,inde) in item.typeList" :key="index">
						{{ite}}
					</view>
				</view>
				<view class="five-user">
					<view class="five-user-left">
						<view class="left">
							<image :src="item.headUrl" mode=""></image>
						</view>
						<view class="center">
							<view class="one">
								{{item.realName}}
							</view>
							<view class="two">
								{{item.createDate}}
							</view>
						</view>
					</view>
					<view class="right" @click="navInformation(item,0)">
						查看简历
					</view>
				</view>

			</view>
			<!-- 招聘信息 -->
			<view class="card2" v-if="names == '招聘信息'" v-for="item,index in userList" :key="index"
				@click.stop="navInformation(item,1)">
				<view class="one-title">
					<view class="left">
						{{item.positionName}}
					</view>
					<view class="right">
						{{item.money}}元
					</view>
				</view>
				<view class="two-address">
					<image class="image" src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png"
						mode="">
					</image>
					<view>{{item.address}}</view>
				</view>
				<view class="four-key">
					<view class="key" v-for="(ite,inde) in item.typeList" :key="index">
						{{ite}}
					</view>

				</view>
				<view class="five-user">
					<view class="five-user-left">
						<view class="left">
							<image :src="item.headUrl" mode=""></image>
						</view>
						<view class="center">
							<view class="one">
								{{item.realName}}
							</view>
							<view class="two">
								{{item.createDate}}
							</view>
						</view>
					</view>
					<view class="right" @click="navInformation(item,1)">
						去申请
					</view>
				</view>
			</view>
			<!-- 家政服务 -->
			<view class="card1" v-if="names == '家政服务'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'家政服务')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<!-- <u-icon name="map"></u-icon> -->
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{item.workAddress}}</view>
					</view>
					<view class="three-certificate">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/c81ba13778a54369b826427a53729e8e.png" mode="">
						</image>
					</view>
					<view class="four-key">
						<view class="key-key">
							<view class="key" v-for="(ite,inde) in item.listType" :key="index">
								{{ite}}
							</view>
						</view>
						<view class="price">
							￥{{item.money}} <text style="font-size: 24rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 志愿服务 -->
			<view class="card3" v-if="names == '志愿服务'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'志愿服务')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<view>{{item.createDate}}</view>
					</view>
				</view>

			</view>
			<!-- 趣味活动 -->
			<view class="card3" v-if="names == '趣味活动'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'趣味活动')">
				<view class="left">
					<image class="image" :src="item.pic" mode="">
					</image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<view>{{item.createDate}}</view>
					</view>
					<view class="text2">
						免费
					</view>
				</view>

			</view>

			<!-- 新闻资讯 -->
			<view class="jumin" v-if="names == '新闻资讯'">
				<view class="concat-list">
					<view class="list" v-for="(item,index) in userList" :key="index" @click="navDtails(item,'新闻资讯')">
						<view class="left">
							<view class="title">
								{{item.title}}
							</view>
							<view class="text">
								{{item.realName}} | {{item.createDate}}
							</view>
						</view>
						<view class="right">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- <uni-load-more :status="status" color="#007aff" /> -->
			</view>

			<!-- 就诊资讯 -->
			<view class="jumin" v-if="names == '就诊资讯'">
				<view class="concat-list">
					<view class="list" v-for="(item,index) in userList" :key="index" @click="navDtails(item,'就诊资讯')">
						<view class="left">
							<view class="title">
								{{item.title}}
							</view>
							<view class="text">
								{{item.realName}} | {{item.createDate}}
							</view>
						</view>
						<view class="right">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- <uni-load-more :status="status" color="#007aff" /> -->
			</view>





		</view>

		<nodata v-if="userList.length === 0"></nodata>
		<!-- v-if="indexList.length > 0" -->


	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '我的点赞',
				togList: [{
						name: '旅游攻略'
					}, {
						name: '社区互动',
					}, {
						name: '议事广场',
					}, {
						name: '文化休闲',
					}, {
						name: '兴趣课程',
					}, {
						name: '趣味活动',
					},
					{
						name: '新闻资讯',
					},
					{
						name: '就诊资讯',
					},
				],
				yfzxact: 0,
				List: [],
				likenum: 0,
				commentnum: 0,
				carenum: 0,
				introdutionId: '',
				// fromData: {
				// 	type: 5,
				// },
				userList: {},
				show: false,
				value: '',
				status: 0,
				fromData: {
					// limit: 10,
					// page: 1,
					type: null
				},
				share: null,
				popup: false,
				names: '旅游攻略',
				list1: [],
				substrings: [],
				likeType: null,

			}
		},
		onLoad() {
			if (this.names == '旅游攻略') {
				this.names = '旅游攻略'
				this.fromData.type = 5
				this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
					this.userList = res.data.data
				})
			}

		},

		filters: {
			// 去除富文本标签样式
			removeHtmlStyle(html) {
				const relStyle = /style\s*?=\s*?(['"])[\s\S]*?\1/g
				const relTag = /<.+?>/g
				const relClass = /class\s*?=\s*?(['"])[\s\S]*?\1/g
				// content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, '')

				let newHtml = ''
				if (html) {
					newHtml = html.replace(relStyle, '')
					newHtml = newHtml.replace(relTag, '')
					newHtml = newHtml.replace(relClass, '')
				}
				return newHtml
			}
		},
		methods: {


			// 点赞
			like(item) {

				let list = {
					id: item.id,
					type: item.publisherType
				}
				this.fromData.type = item.publisherType
				this.$api.get('/api/introdution/Like', list).then(res => {
					this.$showToast(res.data.data)
					if (res.data.data == '点赞成功') {
						this.likeShow = false
					} else if (res.data.data == '取消成功') {
						this.likeShow = true
					}
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				})
			},

			// 切换社区获取数据
			changeTab(index) {

				if (index.name == "旅游攻略") {
					this.title = '旅游攻略'
					this.names = '旅游攻略'
					this.fromData.type = 5
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})

					// this.getList()
				}

				if (index.name == "社区互动") {
					this.fromData.type = 9
					this.title = '社区互动'
					this.names = '社区互动'
					this.substrings1 = []
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "议事广场") {
					this.fromData.type = 1
					this.title = '议事广场'
					this.names = '议事广场'
					this.substrings1 = []
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "文化休闲") {
					this.title = '文化休闲'
					this.names = '文化休闲'
					this.fromData.type = 2
					this.substrings = []
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "兴趣课程") {
					this.title = '兴趣课程'
					this.names = '兴趣课程'
					this.fromData.type = 3
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "趣味活动") {
					this.title = '趣味活动'
					this.names = '趣味活动'
					this.fromData.type = 4
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}



				if (index.name == "新闻资讯") {
					this.title = '新闻资讯'
					this.names = '新闻资讯'
					this.fromData.type = 7
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}
				if (index.name == "就诊资讯") {
					this.title = '就诊资讯'
					this.names = '就诊资讯'
					this.fromData.type = 8
					this.$api.get('/api/behavior/likeList', this.fromData).then(res => {
						this.userList = res.data.data
					})
				}

			},
			// 去详情页面
			navDtails(item, name) {
				let obj = {
					id: item.id,
					title: name
				}
				if (name == '旅游攻略') {
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + item.id
					})
				}
				if (name == '议事广场') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '文化休闲') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/cultureDetails?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '社区互动') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails2?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '兴趣课程') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/interestDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (name == '趣味活动') {
					uni.navigateTo({
						url: '/pagesService/funActivity/detailActivity?id=' + item.id
					})
				}
				if (name == '新闻资讯') {
					uni.navigateTo({
						url: '/pagesService/news/newsDetails?id=' + item.id
					})
				}
				if (name == '就诊资讯') {
					uni.navigateTo({
						url: '/pagesService/news/newsDetails?id=' + item.id
					})
				}

			},
		}
	}
</script>
<style lang="scss">
	.u-tabs__wrapper__nav__line {
		left: 34rpx !important;
		bottom: 8rpx !important;
	}

	.u-page {
		padding: 0;
	}

	.page {
		// padding-top: 130rpx;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.tabs>view {
		width: 50% !important;
	}

	.active {
		color: #007A69 !important;
		border-bottom: 4rpx solid #007A69;
		font-size: 34rpx !important;
	}
</style>

<style lang="less">
	.toggleCard {
		background-color: #fff;
		padding: 0 24rpx 24rpx;


		.toggle {
			height: 108rpx;
			// background-image: url('https://i.ringzle.com/file/20231219/e8eac48eac6649199796fb20fd9f109c.png');
			// background-size: 100% 100%;
			// background-repeat: no-repeat;

			.toggle-list {
				// background-color: aqua;
				margin: 0 12rpx;
				display: inline-block;
				/* 让内容水平排列，不换行 */
				/* 添加内容的样式，如内边距、外边距、宽度等 */

				.text {
					width: 136rpx;
					height: 48rpx;
					color: #363636;
					font-size: 34rpx
				}
			}

		}

		.card {
			box-sizing: border-box;
			padding: 0 24rpx 24rpx;
			margin: 24rpx auto 24rpx;
			// margin: 0 24rpx 24rpx;
			background: #FFFFFF;
			width: 676rpx;
			border-radius: 16rpx;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);


			.card-top {
				padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-left {
					display: flex;

					image {
						border-radius: 50rpx;
						width: 60rpx;
						height: 60rpx;
						margin: 0 16rpx 0 -22rpx;
					}

					.top-name {
						text-align: left;

						h3 {
							font-size: 28rpx;
							color: #333333;
						}

						span {
							font-size: 22rpx;
							color: #AAAAAA;
						}
					}

				}

				.top-time {
					// background: agba(0, 0, 0, 0.8) #1E6BFF;
					color: #00BEFF;
					font-size: 24rpx;
					background: #ebfaff;
					padding: 4rpx 16rpx;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
				}
			}

			.card-center {
				width: 625rpx;
				overflow: hidden;

				.center-title {
					color: #333333;
					font-size: 26rpx;
					overflow-wrap: break-word;
					// color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					text-align: left;
					white-space: nowrap;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					// line-height: 37px;
					// margin: 19px 163px 0 24px;
				}

				.center-text {
					margin-top: 6rpx;
					color: #666666;
					font-size: 28rpx;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;


				}
			}

			.card-img {
				display: flex;
				justify-content: space-between;

				.image {

					.img {
						width: 214rpx;
						height: 214rpx;
						background: #00BEFF;

						.img:nth-child(1) {
							border-radius: 16rpx 0rpx 0rpx 16rpx;
						}

						.img:nth-child(2) {
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}

						.img:nth-child(3) {
							border-radius: 0rpx 16rpx 16rpx 0rpx;
						}
					}
				}


			}



			.card-bottom {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin: 32rpx 0;
				// width: 702rpx;


				.card-img-one {
					// margin: 0 44rpx;
					display: flex;
					margin: 0 auto;



					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-two {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-three {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}


			}



		}

		.card1 {
			box-sizing: border-box;
			display: flex;
			padding: 24rpx 0;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;

				.image {
					width: 204rpx;
					height: 204rpx;
					border-radius: 16rpx;
				}

			}

			.right {
				.one-title {
					font-size: 36rpx;
					color: #1C1E41;
					font-weight: bold;
				}

				.one-titles {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					height: 140rpx;
					width: 480rpx;
				}

				.two-address {
					display: flex;
					align-items: center;
					font: size 24rpx;
					color: #1C1E41;
					margin: 10rpx 0;

					.image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				.three-certificate {
					.image {
						width: 112rpx;
						height: 40rpx;


					}
				}

				.four-key {
					margin: 10rpx 0 10rpx;
					display: flex;
					justify-content: space-between;
					width: 475rpx;

					.key-key {
						display: flex;
					}

					.key {
						line-height: 40rpx;
						display: flex;
						margin-right: 8rpx;
						font-size: 22rpx;
						padding: 6rpx 6rpx;
						color: #874D29;
						border: 1rpx solid #EBC9B8;
					}

					.price {
						font-size: 40rpx;
						color: #FD3939;
					}
				}

				.one-content {
					display: flex;
					justify-content: space-between;

					.image {
						margin: 0 10rpx;
						width: 72rpx;
						height: 72rpx;
						border-radius: 50rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50rpx;
						}
					}

					.text {
						.name {
							font-size: 30rpx;
							color: #111;
							font-weight: Regular;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
							font-weight: Regular;
						}
					}

					.Thumbs {
						margin-top: 20rpx;
					}
				}


			}
		}

		.card2 {
			box-sizing: border-box;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.one-title {
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 32rpx;
					color: #333333;
					font-weight: Bold;
				}

				.right {
					font-size: 32rpx;
					color: #FF4141;
					font-weight: Bold;
				}
			}

			.two-address {
				display: flex;
				align-items: center;
				font: size 24rpx;
				color: #1C1E41;
				margin: 24rpx 0 20rpx;
				font-weight: Regular;

				.image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}

			.four-key {
				margin: 20rpx 0 36rpx;

				display: flex;

				.key {
					display: flex;
					margin-right: 12rpx;
					font-size: 22rpx;
					padding: 6rpx 12rpx;
					color: #874D29;
					border: 1rpx solid #EBC9B8;
				}
			}

			.five-user {
				display: flex;
				justify-content: space-between;

				.five-user-left {
					display: flex;

				}

				.left {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.center {
					margin: 0 20rpx;

					.one {
						font-size: 28rpx;
						color: #333333;
						font-weight: Bold;
					}

					.two {
						font-size: 26rpx;
						color: #808080;
						font-weight: Regular;
					}
				}

				.right {
					border-radius: 50rpx;
					border: 1rpx solid #007A69;
					color: #007A69;
					text-align: center;
					line-height: 64rpx;
					width: 148rpx;
					height: 64rpx;
					font-weight: Regular;
				}

			}

		}

		.card3 {
			box-sizing: border-box;
			display: flex;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;

				.image {
					width: 288rpx;
					height: 204rpx;
					border-radius: 16rpx;
				}

			}

			.right {
				padding: 10rpx 0;

				.one-title {
					font-size: 32rpx;
					color: #1C1E41;
					font-weight: Bold;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 指定最大行数 */
					-webkit-box-orient: vertical;
					/* 垂直排列文本 */
					overflow: hidden;
				}

				.two-address {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #1C1E41;
					margin: 16rpx 0;
					font-weight: Regular;

				}

				.text2 {
					font-weight: Regular;
					font-size: 26rpx;
					color: #FF4141;
					margin: 6rpx 0;
				}


			}
		}


		.jumin {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.concat-list {
				// display: flex;
				padding: 24rpx;
				// height: 1600rpx;

				.list {
					display: flex;
					padding: 30rpx 0 36rpx;
					border-top: 1rpx solid #EFEFEF;
				}

				.left {
					width: 468rpx;

					.title {
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
						margin-bottom: 30rpx;
						margin-right: 24rpx;
						width: 468rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 指定最大行数 */
						-webkit-box-orient: vertical;
						/* 垂直排列文本 */
						overflow: hidden;

					}

					.text {
						font-size: 26rpx;
						font-weight: Regular;
						color: #999999;
					}
				}

				.right {
					width: 210rpx;
					height: 142rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}



	}
</style>